<template>
  <div class="container">
    <div class="Vehicledetail-container">
      <el-card class="box-card">
        <!-- 头部 -->
        <div class="Vehicledetail-header">
          <el-tabs v-model="activeName" :data="basicInfo">
            <el-tab-pane label="基本信息" name="first">
              <el-card class="box-card" style="border: none">
                <el-form ref="basicInfoForm" :model="basicInfo" :rules="rules">
                  <!-- 第1行 -->
                  <el-row style="margin-top: 20px">
                    <!-- 车辆编号 -->
                    <el-col :span="8">
                      <span
                        v-if="!judge"
                      ><i style="color: red">*</i> 车辆编号：{{
                        basicInfo.id
                      }}</span>
                      <el-form-item
                        v-else
                      ><i style="color: red">*</i> 车辆编号：<el-input
                        v-model.number="basicInfo.id"
                        style="width: 214px"
                        :disabled="true"
                      /></el-form-item>
                    </el-col>
                    <!-- 车牌号码 -->
                    <el-col :span="8">
                      <span
                        v-if="!judge"
                      ><i style="color: red">*</i> 车牌号码：{{
                        basicInfo.licensePlate
                      }}</span>
                      <el-form-item
                        v-else
                        prop="licensePlate"
                      ><i style="color: red">*</i> 车牌号码：<el-input
                        v-model="basicInfo.licensePlate"
                        style="width: 214px"
                      /></el-form-item>
                    </el-col>
                    <!-- 车型名称 -->
                    <el-col :span="8">
                      <span
                        v-if="!judge"
                      ><i style="color: red">*</i> 车型名称：{{
                        basicInfo.truckTypeName
                      }}</span>
                      <el-form-item
                        v-else
                        prop="truckTypeName"
                      ><i style="color: red">*</i> 车型名称：<el-select
                        v-model="basicInfo.truckTypeName"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.name"
                          :value="item.name"
                        /> </el-select></el-form-item>
                    </el-col>
                  </el-row>
                  <!-- 第2行 -->
                  <el-row style="margin: 30px 0 30px 0">
                    <!-- 车辆体积 -->
                    <el-col :span="8">
                      <span
                        v-if="!judge"
                      ><i style="color: red">*</i> 车辆体积：{{
                        basicInfo.allowableVolume
                      }}</span>
                      <el-form-item
                        v-else
                        prop="allowableVolume"
                      ><i style="color: red">*</i> 车辆体积：<el-input
                        v-model.number="basicInfo.allowableVolume"
                        style="width: 214px"
                      /></el-form-item>
                    </el-col>
                    <!-- 车辆载重 -->
                    <el-col :span="8">
                      <span
                        v-if="!judge"
                      ><i style="color: red">*</i> 车辆载重：{{
                        basicInfo.allowableLoad
                      }}</span>
                      <el-form-item
                        v-else
                        prop="allowableLoad"
                      ><i style="color: red">*</i> 车辆载重：<el-input
                        v-model.number="basicInfo.allowableLoad"
                        style="width: 214px"
                      /></el-form-item>
                    </el-col>
                    <!-- GPSID -->
                    <el-col :span="8">
                      <span
                        v-if="!judge"
                      ><i style="color: red">*</i> GPSID：{{
                        basicInfo.deviceGpsId
                      }}</span>
                      <el-form-item
                        v-else
                        prop="deviceGpsId"
                      ><i style="color: red">*</i> GPSID：<el-input
                        v-model="basicInfo.deviceGpsId"
                        style="width: 214px"
                      /></el-form-item>
                    </el-col>
                  </el-row>
                  <!-- 第3行 -->
                  <el-row>
                    <el-col :span="2"> 图片信息： </el-col>
                    <!-- 显示上传的图片 -->
                    <el-col v-if="basicInfo.picture" :span="2">
                      <img
                        v-if="basicInfo.picture"
                        :src="basicInfo.picture"
                        style="width: 214px; height: 160px; display: block;"
                        class="avatar"
                      >
                    </el-col>
                  </el-row>
                  <p v-if="judge" style="font-size: 12px">
                    注：图片大小不超过5M；仅能上传 PNG JPEG
                    JPG类型图片；建议上传400*300尺寸的图片；最多上传2张
                  </p>
                </el-form>
              </el-card>
            </el-tab-pane>

            <el-tab-pane label="行驶证信息">
              <el-card class="box-card" style="border: none">
                <el-form ref="basicInfoForm" :model="basicInfo" :rules="rules">
                  <!-- 第1行 -->
                  <el-row style="margin-top: 20px">
                    <!-- 车辆编号 -->
                    <el-col :span="8">
                      <span
                        v-if="!judge"
                      ><i style="color: red">*</i> 车辆编号：{{
                        basicInfo.id
                      }}</span>
                      <el-form-item
                        v-else
                      ><i style="color: red">*</i> 车辆编号：<el-input
                        v-model.number="basicInfo.id"
                        style="width: 214px"
                        :disabled="true"
                      /></el-form-item>
                    </el-col>
                    <!-- 车牌号码 -->
                    <el-col :span="8">
                      <span
                        v-if="!judge"
                      ><i style="color: red">*</i> 车牌号码：{{
                        basicInfo.licensePlate
                      }}</span>
                      <el-form-item
                        v-else
                        prop="licensePlate"
                      ><i style="color: red">*</i> 车牌号码：<el-input
                        v-model="basicInfo.licensePlate"
                        style="width: 214px"
                      /></el-form-item>
                    </el-col>
                    <!-- 车型名称 -->
                    <el-col :span="8">
                      <span
                        v-if="!judge"
                      ><i style="color: red">*</i> 车型名称：{{
                        basicInfo.truckTypeName
                      }}</span>
                      <el-form-item
                        v-else
                        prop="truckTypeName"
                      ><i style="color: red">*</i> 车型名称：<el-select
                        v-model="basicInfo.truckTypeName"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.name"
                          :value="item.name"
                        /> </el-select></el-form-item>
                    </el-col>
                  </el-row>
                  <!-- 第2行 -->
                  <el-row style="margin: 30px 0 30px 0">
                    <!-- 车辆体积 -->
                    <el-col :span="8">
                      <span
                        v-if="!judge"
                      ><i style="color: red">*</i> 车辆体积：{{
                        basicInfo.allowableVolume
                      }}</span>
                      <el-form-item
                        v-else
                        prop="allowableVolume"
                      ><i style="color: red">*</i> 车辆体积：<el-input
                        v-model.number="basicInfo.allowableVolume"
                        style="width: 214px"
                      /></el-form-item>
                    </el-col>
                    <!-- 车辆载重 -->
                    <el-col :span="8">
                      <span
                        v-if="!judge"
                      ><i style="color: red">*</i> 车辆载重：{{
                        basicInfo.allowableLoad
                      }}</span>
                      <el-form-item
                        v-else
                        prop="allowableLoad"
                      ><i style="color: red">*</i> 车辆载重：<el-input
                        v-model.number="basicInfo.allowableLoad"
                        style="width: 214px"
                      /></el-form-item>
                    </el-col>
                    <!-- GPSID -->
                    <el-col :span="8">
                      <span
                        v-if="!judge"
                      ><i style="color: red">*</i> GPSID：{{
                        basicInfo.deviceGpsId
                      }}</span>
                      <el-form-item
                        v-else
                        prop="deviceGpsId"
                      ><i style="color: red">*</i> GPSID：<el-input
                        v-model="basicInfo.deviceGpsId"
                        style="width: 214px"
                      /></el-form-item>
                    </el-col>
                  </el-row>
                  <!-- 第3行 -->
                  <el-row>
                    <el-col :span="2"> 图片信息： </el-col>
                    <!-- 显示上传的图片 -->
                    <el-col v-if="basicInfo.picture" :span="2">
                      <img
                        v-if="basicInfo.picture"
                        :src="basicInfo.picture"
                        style="width: 214px; height: 160px; display: block;"
                        class="avatar"
                      >
                    </el-col>
                  </el-row>
                  <p v-if="judge" style="font-size: 12px">
                    注：图片大小不超过5M；仅能上传 PNG JPEG
                    JPG类型图片；建议上传400*300尺寸的图片；最多上传2张
                  </p>
                </el-form>
              </el-card>
            </el-tab-pane>
          </el-tabs>
          <el-divider />
          <!-- 底部 -->
          <div class="foot">
            <div v-if="judge">
              <!-- 编辑状态 -->
              <el-button
                type="primary"
                style="
                  background-color: #e15536;
                  border: none;
                  width: 110px;
                  height: 40px;
                "
                @click="editVehicleDetail"
              >确定</el-button>
              <el-button
                type="primary"
                style="
                  background-color: #ffeeeb;
                  border: 1px solid #f3917c;
                  color: #e15536;
                  width: 110px;
                  height: 40px;
                "
                @click="editCancel"
              >取消</el-button>
            </div>

            <!-- 非编辑状态 -->
            <template v-else>
              <el-button
                type="primary"
                style="
                  background-color: #e15536;
                  border: none;
                  width: 110px;
                  height: 40px;
                "
                @click="editVehicle"
              >
                编辑
              </el-button>
            </template>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  editVehicleDetail,
  getCarTypeList,
  getVehicle,
  getVehicleDetail
} from '@/api/vehicle'
export default {
  name: 'Vehicledetail',
  data() {
    return {
      activeName: 'first', // tabs默认选中
      judge: false, // 编辑状态变量
      srcList: [], // 图片数组
      options: [], // 车辆类型列表
      // 上传图片变量
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      // 基本信息
      basicInfo: {
        allowableLoad: null, // 准载重量
        allowableVolume: null, // 准载体积
        deviceGpsId: '', // GPS设备ID
        licensePlate: '', // 车牌号码
        picture: '', // 图片信息
        truckTypeId: null, // 车辆类型Id
        truckTypeName: '', // 车辆类型名称
        id: null // 车辆编号
      },
      obj: {}, // 编辑-取消
      rules: {
        // GPS设备ID
        deviceGpsId: [
          { required: true, message: 'GPS设备ID不能为空', trigger: 'blur' }
        ],
        // 准载重量
        allowableLoad: [
          { required: true, message: '准载重量不能为空', trigger: 'blur' },
          { type: 'number', message: '准载重量必须为数字值', trigger: 'blur' }
        ],
        // 准载体积
        allowableVolume: [
          { required: true, message: '准载体积不能为空', trigger: 'blur' },
          { type: 'number', message: '准载体积必须为数字值', trigger: 'blur' }
        ], // 车牌
        licensePlate: [
          { required: true, message: '车牌号码不能为空', trigger: 'blur' },
          {
            pattern:
              /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/,
            message: '车牌格式不对'
          },
          {
            trigger: 'blur',
            // 自定义校验模式
            validator: async(rule, value, callback) => {
              // value就是输入的编码
              const res = await getVehicle({ page: 1, pageSize: 10 })
              // result数组中是否存在 value值
              // if (res.items.some((item) => item.licensePlate === value)) {
              if (
                res.items.some(
                  (item) =>
                    item.licensePlate === value && this.basicInfo.id !== item.id
                )
              ) {
                callback(new Error('车牌号码已存在'))
              } else {
                callback()
              }
            }
          }
        ],
        // 图片信息
        // picture: [
        //   { required: true, message: '图片信息车辆类型不能为空', trigger: 'blur' },
        // ],
        // 车辆类型名称
        truckTypeName: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    // 获取车辆详情
    const res = await getVehicleDetail(this.$route.params.id)
    this.basicInfo = res
    this.srcList.push(this.basicInfo.picture)
  },
  methods: {
    // 提前存一份数据
    async storageList() {
      const res = await getVehicleDetail(this.$route.params.id)
      this.obj = res // 提前存一份数据
      // console.log(this.obj)
      this.basicInfo = this.obj
    },
    // 编辑车辆详情
    async editVehicle() {
      this.judge = true // 编辑状态 开
      // 获取车型列表-去重复
      const res = await getCarTypeList()
      const list = []
      res.forEach((ele) => list.push({ name: ele.name, value: ele.id }))
      list.reduce((accumulator, currentItem) => {
        const existingItem = accumulator.find(
          (item) => item.value === currentItem.value
        )
        if (!existingItem) {
          accumulator.push(currentItem)
        }
        return accumulator
      }, this.options)
    },
    // 编辑确定
    async editVehicleDetail() {
      await this.$refs.basicInfoForm.validate() // 表单校验
      await editVehicleDetail(this.basicInfo, this.basicInfo.id) // 发送请求
      this.$message.success('修改成功')
      this.judge = false
    },
    // 编辑取消
    async editCancel() {
      this.storageList()
      this.judge = false // 编辑状态 关
    }
    // 行驶证信息
    // carDetail(row) {
    //   console.log(row)
    //   this.$router.push({
    //     name: '/expreManagement/carDetail'
    //   //   params: {
    //   //     myObject: row
    //   //   }
    //   })
    // }
  }
}
</script>

<style lang='scss'  scoped>
.container {
  .Vehicledetail-container {
    padding-left: 20px;
    padding-right: 20px;
    background-color: #f4f6f8;
    .foot {
      text-align: center;

    }
  }

}

</style>
